<template>
  <!-- 折线图 -->
  <div class="chart-container" :style="position">
      <div :id="id" key="brokenline-main" class="chart-main">
      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted, reactive,watch} from 'vue'
export default {
  name:'BrokenLineChart',
  props:{
    data:{
      type:Object,
      default:{
            "runtimes": "0.877秒",
            "uid": "2e5be054_2752_78c0_9e68_200ad05a6a45",
            "eid": 0,
            "author": "",
            "msg": "",
            "code": 200,
            "status": "Y",
            "counts": 0,
            "data": {
                "usableName": "可用积分",
                "totalName": "累计积分",
                "usableData": [
                    [
                        "第一名",
                        "10004"
                    ],
                    [
                        "第二名",
                        "1683"
                    ],
                    [
                        "第三名",
                        "233"
                    ],
                    [
                        "第四名",
                        "771"
                    ],
                    [
                        "第五名",
                        "571"
                    ],
                    [
                        "第六名",
                        "377"
                    ],
                    [
                        "第七名",
                        "353"
                    ],
                    [
                        "第八名",
                        "265"
                    ],
                    [
                        "第九名",
                        "265"
                    ],
                    [
                        "第十名",
                        "242"
                    ]
                ],
                "totalData": [
                    [
                        "第一名",
                        "10004"
                    ],
                    [
                        "第二名",
                        "2090"
                    ],
                    [
                        "第三名",
                        "1670"
                    ],
                    [
                        "第四名",
                        "783"
                    ],
                    [
                        "第五名",
                        "571"
                    ],
                    [
                        "第六名",
                        "378"
                    ],
                    [
                        "第七名",
                        "360"
                    ],
                    [
                        "第八名",
                        "270"
                    ],
                    [
                        "第九名",
                        "266"
                    ],
                    [
                        "第十名",
                        "242"
                    ]
                ],
                "userName": [
                    "刘佳超",
                    "魔学院",
                    "熊友良",
                    "理想三旬",
                    "很久很...",
                    "1873853862",
                    "哈哈",
                    "梅兰竹菊",
                    "135*****932",
                    "156*****668"
                ]
            }
        }
    },
    info:{
        type:Object,
        default:()=>({})
    },
    title:{
        type:String,
        default:'折线图'
    },
    subtext:{
        type:String,
        default:'数据/人数'
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    const id = 'brokenline-main'+Number(Math.random()*100).toFixed(4)
    var option = {}
    var myChart;
    let xdata2 = props.data.data.userName
    onMounted(()=>{
      myChart = echarts.init(document.getElementById(id));
      option = reactive({
          title: {
              text: props.title,
              textStyle: {
                fontSize: 14,
                color: "#74bdff"
              },
              left:'5%',
              top:'5%',
              subtext: props.subtext,
              subtextStyle:{
                  fontSize: 12,
                  color: "#7585a7"
              },
          },
          grid: {
                left: "10%",
                top:"30%",
                right:"10%",
                bottom:"10%",
                containLabel:true,
            },
          tooltip: {
              trigger: 'axis',
              formatter:(params)=>{
                if (params.length == 2) {
                  return  params[0].axisValue+'\n'+xdata2[params[0].dataIndex]+'<br>'+
                          params[0].marker+"可用积分"+" : "+params[0].data[1]+'\n'+'<br>'+
                          params[1].marker+"累计积分"+" : "+params[1].data[1]+'\n'+'<br>'
                }else if(params.length == 1){
                  return  params[0].axisValue+'\n'+xdata2[params[0].dataIndex]+'<br>'+
                          params[0].marker+"可用积分"+" : "+params[0].data[1]+'\n'+'<br>'
                }
              }
          },
          legend: {
              data: [props.data.data.usableName, props.data.data.totalName],
              top:10,
              right:50,
              textStyle: {
                  color: "#7585a7"
              }
          },
          xAxis: [{
              type: 'category',
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#8df'
                  }
              },
              axisTick:{
                  show: false
              },
              },
              {
                  type: 'category',
                  position: 'bottom',
                  offset: 25,
                  axisPointer: {
                      type: 'none'
                  },
                  axisTick:{
                      show: false
                  },
                  axisLine:{
                      show: false
                  },
                  data: xdata2
              }
          ],
          yAxis: {
              type: 'value',
              boundaryGap: [0, '10%'],
              splitLine:{
                  show:false
              },
              axisLine:{
                show:true  
              },
          },
          series: [
              {
                  name: props.data.data.usableName,
                  type: 'line',
                  data: props.data.data.usableData,
              },
              {
                  name: props.data.data.totalName,
                  type: 'line',
                  data: props.data.data.totalData,
              }
          ]
      })
      create() 
    })

    const create = ()=>{
      myChart.setOption(option)
    }
    watch(
        () => props.info?.size,
        () => {
            myChart.dispose() //重置echart
            myChart = null
            myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option)
        },
        { deep: true,}
    );
    return{
      position,
      id,
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;//暂时，需改为动态数据
    left: 0px;
    top: 0px;
    background-color: rgba($color: #071c55, $alpha: 0.5);
    i{
    width: 20px;
    height: 20px;
    position: absolute;
    // display: block;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../../assets/images/useimages/br.png') no-repeat right bottom;
  }
}
.chart-main{
  width: 100%;
  height: 100%;
}
</style>